<template>
  <div class="update-pict">
    <div class="pict-start">
      <div>
        <div @click="upload" v-show="!option.img">
          <input type="file" hidden ref="file" />
          <h4>点击上传</h4>
        </div>
        <vueCropper
          v-if="option.img"
          ref="tailoring"
          mode="cover"
          :img="option.img"
          :output-size="option.size"
          :output-type="option.outputType"
          :info="true"
          :full="option.full"
          :fixed="option.fixed"
          :fixed-number="option.fixedNumber"
          :can-move="option.canMove"
          :can-move-box="option.canMoveBox"
          :fixed-box="option.fixedBox"
          :original="option.original"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
          :high="option.high"
          :info-true="option.infoTrue"
          :max-img-size="option.max"
          @real-time="realTime"
        ></vueCropper>
      </div>
    </div>
    <div class="pict-new">
      <div>
        <div v-show="!option.img">
          <img :src="host + info.user_portrait" alt="头像" />
        </div>
        <div
          v-if="option.img"
          :style="{
            ...previews.div,
            overflow: 'hidden',
            zoom: 180 / previews.w,
          }"
        >
          <img :src="previews.url" :style="previews.img" />
        </div>
      </div>
      <button @click="reset">重置</button>
      <button @click="updatePort">保存</button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { updatePortApi } from "../../../api";
import { mapState } from "vuex";
import config from "../../../config";
export default {
  name: "UpdatePict",
  data() {
    return {
      host: config.host,
      previews: {},
      option: {
        // 图片地址
        img: "",
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        // 固定截图框大小，默认固定，false 为可调整
        fixedBox: false,
        // 上传图片按照原始比例渲染
        original: false,
        // 截图框能否拖动
        canMoveBox: true,
        // 开启截图模式
        autoCrop: true,
        // 截图框的宽高，只有开启截图模式后宽度高度才生效
        autoCropWidth: 250,
        autoCropHeight: 250,
        // 截图框是否被限制在图片里面
        centerBox: false,
        // 是否按照设备的dpr 输出等比例图片
        high: true,
        max: 99999,
        fixedNumber: [1, 1],
        fixed: true,
      },
    };
  },
  components: {
    VueCropper,
  },
  computed: {
    ...mapState("user", ["info"]),
  },
  methods: {
    upload() {
      this.$refs.file.click();
    },
    change() {
      this.option.img = URL.createObjectURL(this.$refs.file.files[0] || "");
    },
    updatePort() {
      if (!this.option.img) return;
      this.$refs.tailoring.getCropBlob((data) => {
        let formData = new FormData();
        formData.append("user_portrait", data);
        // updatePortApi
        updatePortApi(
          (response) => {
            console.log(response.data);
            if (response.data.status === 1) {
              this.$refs.file.type = "text";
              this.$refs.file.type = "file";
              this.option.img = "";
              this.$store.dispatch("user/getInfo");
              this.$bus.$emit("showTips", "头像修改成功!");
            } else {
              this.$bus.$emit("showTips", "出错了，修改失败！!");
            }
          },
          (err) => {
            this.$bus.$emit("showTips", "出错了，检查一下网络是否连接吧！!");
            console.log(err);
          },
          formData
        );
      });
    },
    reset() {
      this.$refs.file.type = "text";
      this.$refs.file.type = "file";
      this.option.img = "";
    },
    // 截图相关
    realTime(data) {
      this.previews = data;
      // console.log(data);
    },
    getImg() {
      this.$refs.cropper.getCropData((data) => {
        // console.log(data);
        this.newUrl = data;
        this.isShow = true;
      });
    },
  },
  mounted() {
    this.$refs.file.addEventListener("change", this.change);
  },
};
</script>

<style lang="stylus" scoped>
.update-pict {
  width: 80%;
  padding: 20px 0;
  display: flex;

  .pict-start {
    width: 400px;

    &>div {
      width: 350px;
      height: 350px;
      border: 1px solid #999;

      div {
        cursor: pointer;
      }

      h4 {
        text-align: center;
        line-height: 350px;
        font-size: 24px;
      }
    }
  }

  .pict-new {
    width: 200px;

    &>div {
      width: 180px;
      height: 180px;
      overflow: hidden;
      border: 1px solid #999;

      div:first-child {
        img {
          width: 100%;
          height: auto;
        }
      }
    }

    button {
      font-size: 16px;
      margin: 50px 0 0 8px;
      padding: 4px 24px;
      color: #fff;
      background-color: #fe4d1b;
      border: none;
      cursor: pointer;
    }
  }
}
</style>